// /**
// //  * Magento
//  *
//  * NOTICE OF LICENSE
//  *
//  * This source file is subject to the Academic Free License (AFL 3.0)
//  * that is bundled with this package in the file LICENSE_AFL.txt.
//  * It is also available through the world-wide-web at this URL:
//  * http://opensource.org/licenses/afl-3.0.php
//  * If you did not receive a copy of the license and are unable to
//  * obtain it through the world-wide-web, please send an email
//  * to license@magentocommerce.com so we can send you a copy immediately.
//  *
//  * DISCLAIMER
//  *
//  * Do not edit or add to this file if you wish to upgrade Magento to newer
//  * versions in the future. If you wish to customize Magento for your
//  * needs please refer to http://www.magentocommerce.com for more information.
//  *
//  * @category    design
//  * @copyright   Copyright (c) 2014 X.commerce, Inc. (http://www.magentocommerce.com)
//  * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
//  */

// Page Width mixin

.layout-width(
    @_layout-min-width: @layout-min-width,
    @_layout-max-width: @layout-max-width,
    @_layout-indent: @layout-indent
) when not (@responsive = true) {
    ._layout-width(@_layout-min-width, @_layout-max-width);
    margin: 0 auto;
    padding-left: @layout-indent;
    padding-right: @layout-indent;
}

._layout-width(
        @_layout-min-width: @layout-min-width,
        @_layout-max-width: @layout-max-width
    ) when (@_layout-min-width = @_layout-max-width) {
    width: @_layout-min-width;
}

._layout-width(
        @_layout-min-width: @layout-min-width,
        @_layout-max-width: @layout-max-width
    ) when not (@_layout-min-width = @_layout-max-width) {
    width: auto;
    min-width: @_layout-min-width;
    max-width: @_layout-max-width;
}

#layout-columns() {
    & when (@use-flex = true) {
        .box-sizing();
        .mix-flex(flex, row wrap);
    };
    &:after {
        content: " ";
        display: block;
        height: 0;
        clear: both;
        overlow: hidden;
        visibility: hidden;
    }
    .main() {
        .@{layout-class-1column} & {
            .layout-column(1, 2, 100%);
        }
        .@{layout-class-3columns} & {
            .layout-column(3, 2, @layout-column-main-width-3);
        }
        .@{layout-class-2columns-left} & {
            .layout-column(2, 2, @layout-column-main-width-2-left);
        }
        .@{layout-class-2columns-right} & {
            .layout-column(2, 1, @layout-column-main-width-2-right);
        }
    }

    .left() {
        .@{layout-class-3columns} & {
            .layout-column(3, 1, @layout-column-left-width);
        }
        .@{layout-class-2columns-left} & {
            .layout-column(2, 1, @layout-column-left-width);
        }
        .@{layout-class-2columns-right} & {
            .layout-column(2, 1, @layout-column-left-width);
        }
    }

    .right() {
        .@{layout-class-3columns} & {
            .layout-column(3, 3, @layout-column-right-width);
        }
        .@{layout-class-2columns-left} & {
            .layout-column(2, 2, @layout-column-right-width);
        }
        .@{layout-class-2columns-right} & {
            .layout-column(2, 2, @layout-column-right-width);
        }
    }
}

._column-width(@_width, @_check, @_index) when (@_check = false) and (@_index = 1) {
    .column-width(@_width);
}

._column-width(@_width, @_check, @_index) when (@_check = true), (@_width = auto) {
    width: @_width;
    @_index: 1;
}

._set-column-width(@_index, @_width) when (@_index > 0) {
    @_checkUnit: isunit(@_width, extract(@_units, @_index));
    ._column-width(@_width, @_checkUnit, @_index);
    ._set-column-width(@_index - 1, @_width);
}

.layout-column(@_total-columns, @_order, @_width) {
    @_units: "px","%","em","rem","pt";
    ._set-column-width(length(@_units), @_width);
    .flex-degradation(@_total-columns, @_order);
    & when (@use-flex = true) {
        order: @_order;
    }
}

.flex-degradation(@_total-columns, @_order) when (@_order = 1) {
    float: left;
}

.flex-degradation(@_total-columns, @_order) when (@_order = @_total-columns) {
    float: right;
}

.flex-degradation(@_total-columns, @_order) when (@_total-columns = 3) and (@_order = 2) {
    display: inline-block;
}
